<template>
  <div class="app-container">
    <!-- 查询框 -->
    <search-bar class="search">
      <template slot="peopleSearch">
        <el-form class="form">
          <el-row type="flex" justify="end" style="width: 100%">
            <el-form-item>
              <el-col>
                <div>设备编号:</div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="26">
                <el-input class="input" />
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col class="InquireBtn" :push="3">
                <el-button class="InquireBtn" @clikc="getInputVal">
                  <i class="el-icon-search" />查询</el-button>
              </el-col>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
    </search-bar>
    <!-- 按钮 -->
    <el-card>
      <el-form>
        <el-row>
          <el-col>
            <el-button class="addBtn" @click="ShowAddDialog">
              <!-- 新增按钮 -->
              <i class="el-icon-circle-plus-outline " /> 新增</el-button>
            <!-- 批量按钮 -->
            <el-button class="batchBtn">批量操作</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格表单 -->
      <el-table
        :data="vmList"
        stripe
        style="width: 100%; padding-top: 20px; padding-left=10px"
        :header-cell-style="{color:'#333744',background:'rgb(243, 246, 251)'}"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" />
        <el-table-column prop="innerCode" label="设备编号" />
        <el-table-column prop="type.name" label="设备型号" />
        <el-table-column prop="node.name" label="详细地址" />
        <el-table-column prop="ownerName" label="合作商" />
        <el-table-column prop="vmStatus" label="设备状态" :formatter="ChangeStatus" />
        <el-table-column label="操作" width="200">
          <template slot-scope="{row}">
            <el-button type="text" size="small">货道</el-button>
            <el-button type="text" size="small">策略</el-button>
            <el-button type="text" size="small" @click="changeNodeId(row.typeId)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <span class="demonstration">共{{ total }}条记录</span>
        <span class="demonstration">第{{ pageConfig.pageIndex }}/页</span>
        <el-pagination
          :current-page="pageConfig.pageIndex"
          layout=" prev, pager, next"
          :total="total"
          :page-size="pageConfig.pageSize"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <!-- 编辑设备弹框 -->
    <edit-type />
    <!-- :is-show-dialog="isShowDialog" -->
    <!-- 新增设备弹框 -->
    <add-tactics />
    <!-- :is-show-add-dialog="isShowAddDialog" -->
    <!-- 批量操作弹框 -->
  </div>
</template>

<script>
import { getSearchVm } from '@/api/goods'
import editType from './componts/edit-type.vue'
import AddTactics from './componts/add-tactics.vue'
export default {
  components: { editType, AddTactics },
  data() {
    return {
      vmList: [],
      pageConfig: {
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      isShowDialog: false,
      isShowAddDialog: false,
      NodeIdList: {
        innerCode: '',
        vmType: '',
        ownerName: '',
        channelMaxCapacity: '',
        id: '',
        region: '',
        node: ''

      }
    }
  },
  async created() {
    this.getVmList()
  },
  methods: {
    async getVmList() {
      const res = await getSearchVm(this.pageConfig)

      console.log(res)
      // res需要解构，不然会报错
      this.vmList = res.data.currentPageRecords.map((item, index) => {
        return {
          ...item,
          index: (this.pageConfig.pageIndex - 1) * this.pageConfig.pageSize + index + 1
        }
      })
      this.total = +res.data.totalCount
    },
    // 枚举
    ChangeStatus(row, col, val) {
      return this.getSatus(row.vmStatus)
    },
    getSatus(vmStatus) {
      switch (vmStatus) {
        case 0:
          return '未投放'
        case 1:
          return '运营'
        case 2:
          return '撤机'
        default:
          return '已撤销'
      }
    },
    // 弹窗
    async changeNodeId(typeId) {
      // const res = await getSearchVm(typeId)
      // // console.log('res', res)
      // this.NodeIdList = res
      this.isShowDialog = true
    },
    async ShowAddDialog() {
      this.isShowAddDialog = true
    },
    getInputVal() {},
    // 分页
    currentChange(newPage) {
      this.pageConfig = newPage
      this.getVmList()
    }
  }
}
</script>

<style lang="scss" scoped>
.search{
    width: 100%;
.form{
padding-top: 10px;
.InquireBtn{
    color:#fff;
    border-radius: 4px;
    background-color: #5f84ff;
  }
}
}
.el-form-item{
    font-size: 20px;
    color: #606266;
    margin-left: 60px;
    // line-height: 36px;
}
.addBtn{
  color:#fff;
background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
}
.batchBtn{
      background-color: #fbf4f0!important;
      color: #655b56!important;
      border: none;
}
</style>
